<template>
  <div id="empList">
    <!-- 表格 -->
    <div class="empTable">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="用户名">
                <span>{{ props.row.username }}</span>
              </el-form-item>
              <el-form-item label="昵称">
                <span>{{ props.row.nickname }}</span>
              </el-form-item>
              <el-form-item label="密码">
                <el-button @click="editPwd(props.$index)" type="text"
                  >编辑密码</el-button
                >
              </el-form-item>
              <el-form-item label="性别">
                <span>{{ props.row.gender }}</span>
              </el-form-item>
              <el-form-item label="入职部门">
                <span>{{ props.row.department }}</span>
              </el-form-item>
              <el-form-item label="状态">
                <div class="tableStatus">
                  <span v-if="props.row.entry == 1">在职</span>
                  <span v-else>离职</span>
                  <el-button @click="isLeave(props.$index)" type="text"
                    >员工已离职?</el-button
                  >
                </div>
              </el-form-item>
              <el-form-item label="更新时间">
                <span>{{ props.row.updateTime }}</span>
              </el-form-item>
              <el-form-item label="员工头像">
                <el-button @click="showAvatar(props.$index)" type="text"
                  >查看头像</el-button
                >
              </el-form-item>
              <el-form-item> </el-form-item>
              <el-form-item>
                <el-popconfirm
                  @confirm="deleteWorker(props.$index)"
                  title="是否要删除该员工?"
                >
                  <el-button slot="reference" type="danger" plain
                    >删除员工</el-button
                  >
                </el-popconfirm>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column width="310px" label="员工ID" prop="id">
        </el-table-column>
        <el-table-column width="110px" label="用户名" prop="username">
        </el-table-column>
        <el-table-column width="110px" label="所在部门">
          <template slot-scope="scope">
            <div class="tableDepart">
              <span>{{ scope.row.department }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="联系电话" prop="phone"> </el-table-column>
        <el-table-column label="入职时间" prop="createTime"> </el-table-column>
      </el-table>
    </div>
    <!-- 修改密码弹窗 -->
    <div class="editPwd">
      <el-dialog title="编辑密码" :visible.sync="pwdVisible" width="650px">
        <!-- 新密码 -->
        <div class="tablePwd">
          <span>请输入新密码</span>
          <el-input
            v-model="handleData.password"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="pwdVisible = false">取 消</el-button>
          <el-button type="primary" @click="updatePwd()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 员工离职弹窗 -->
    <div class="leave">
      <el-dialog title="提示" :visible.sync="leaveVisible" width="650px">
        <!-- 新密码 -->
        <div class="tablePwd">
          <span>此操作会将该员工状态永久修改为离职,是否继续?</span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="leaveVisible = false">取 消</el-button>
          <el-button type="primary" @click="workerLeave()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 员工头像弹窗 -->
    <div class="avatar">
      <el-dialog title="查看头像" :visible.sync="avatarVisible" width="650px">
        <img :src="handleData.avatar" alt="" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="avatarVisible = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 删除员工弹窗 -->
  </div>
</template>

<script>
import { getAllWorker, updateWorker, removeWorker } from "@/api/admin.js";
export default {
  name: "empList",
  data() {
    return {
      tableData: [
        {
          id: "主键",
          username: "用户名",
          password: "密码",
          nickname: "昵称",
          gender: "性别",
          phone: "手机号",
          avatar: "头像",
          entry: "状态",
          department: "部门",
          createTime: "创建时间",
          updateTime: "修改时间",
        },
      ],
      pwdVisible: false,
      leaveVisible: false,
      avatarVisible: false,
      handleData: {},
    };
  },
  methods: {
    // 获取所有员工列表
    getWorker: function () {
      getAllWorker().then((res) => {
        if (res.code === 200) {
          this.tableData = res.data;
        } else {
          this.$message({
            message: "登录信息失效，请重新登陆",
            type: "warning",
          });
          this.$router.push({
            path: "/Login",
          });
        }
      });
    },
    // 编辑密码按钮
    editPwd: function (id) {
      this.handleData = JSON.parse(JSON.stringify(this.tableData[id]));
      this.handleData.password = "";
      this.pwdVisible = true;
    },
    // 修改密码
    updatePwd: function () {
      updateWorker(
        this.handleData.id,
        this.handleData.username,
        this.handleData.password,
        this.handleData.nickname,
        this.handleData.gender,
        this.handleData.phone,
        this.handleData.avatar,
        this.handleData.entry,
        this.handleData.department,
        this.handleData.creatAt
      ).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.pwdVisible = false;
        } else {
          this.$message({
            message: "修改失败",
            type: "error",
          });
        }
      });
    },
    // 询问员工是否已离职
    isLeave: function (id) {
      this.leaveVisible = true;
      this.handleData = this.tableData[id];
    },
    // 员工离职
    workerLeave: function () {
      updateWorker(
        this.handleData.id,
        this.handleData.username,
        this.handleData.password,
        this.handleData.nickname,
        this.handleData.gender,
        this.handleData.phone,
        this.handleData.avatar,
        0,
        this.handleData.department,
        this.handleData.creatAt
      ).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.handleData.entry = 0;
          this.leaveVisible = false;
        } else {
          this.$message({
            message: "修改失败",
            type: "error",
          });
        }
      });
    },
    // 查看头像
    showAvatar: function (id) {
      this.avatarVisible = true;
      this.handleData = this.tableData[id];
    },
    // 删除员工
    deleteWorker: function (id) {
      removeWorker(this.tableData[id].id).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.tableData.splice(id, 1);
        } else {
          this.$message({
            message: "删除成功",
            type: "success",
          });
        }
      });
    },
  },
  mounted() {
    this.getWorker();
  },
};
</script>

<style lang="less" scoped>
#empList {
  .empTable {
    margin: 20px 0 0 20px;
    .demo-table-expand {
      margin-left: 80px;
      font-size: 0;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
    // 所在部门
    .tableDepart {
      width: 70px;
      height: 28px;
      background-color: rgba(240, 246, 253, 1);
      border: 1px rgba(95, 164, 251, 1) solid;
      color: #5fa4fb;
      border-radius: 5px;
      text-align: center;
      line-height: 28px;
    }
    .tableStatus {
      .el-button {
        margin-left: 10px;
      }
    }
  }
  // 修改密码弹窗
  .editPwd {
    .tablePwd {
      display: flex;
      flex-direction: row;
      align-items: center;
      .el-input {
        margin-left: 10px;
        width: 496px;
      }
    }
  }
  // 头像弹窗
  .avatar {
    img {
      width: 357px;
    }
  }
}
</style>